<input type="checkbox" id="star">
<label for="star">
  <svg viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
  </svg>
</label>

<style>
/* From Uiverse.io by ahmed150up - Tags: checkbox, star */
input[type="checkbox"] {
  display: none;
}

label svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

input[type="checkbox"]:checked + label svg {
  fill: #FFC107;
  animation: pop_42 0.5s ease-out;
}

@keyframes pop_42 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

</style>
